<!--
 *@开发者: 刘翔
 *@创建时间: 2024-04-26 12:50:12
 *@描述:超支结余趋势
!-->
<template>
  <div class="page-tile-9">
    <div class="page-tile-9-top">
      <div class="page-tile-9-top-num-1">
        <span class="color-tips font-width">{{ card1.text3 }}</span>
        <br />
        <span>总结余金额(万元)</span>
      </div>
      <div class="page-tile-9-top-num-2">
        <span class="font-width">{{ card1.text2 }}</span>
        <br />
        <span>拨付金额(万元)</span>
      </div>
      <div class="page-tile-9-top-num-3">
        <span class="font-width">{{ card1.text4 }}</span>
        <br />
        <span>拨付比(%)</span>
      </div>
    </div>
    <div class="page-tile-9-center" ref="pageTitle9TopEchartsRefs"></div>
    <div class="page-tile-9-bottom">
      <span v-html="card1.text1Html"></span>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  // 组件名称
  name: 'pageTile9',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      card1: {},
      data_list: [],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    init(data) {
      let data_list = data.data_list;
      let desc = data.desc;
      //图表
      this.echartsInit(data_list);
      //内容
      this.cardData(desc);
    },
    //图表
    echartsInit(data_list) {
      this.data_list = data_list;
      let myChart = echarts.init(this.$refs.pageTitle9TopEchartsRefs);
      let option;
      option = {
        title: [
          {
            top: 0,
            left: 0,
            text: '结余金额和拨付比趋势',
          },
          {
            top: 20,
            left: 120,
            text: '结余金额(万元)',
            textStyle: {
              fontSize: 18,
              color: '#8e8e8e',
            },
          },
          {
            top: 20,
            right: 120,
            text: '拨付比(%)',
            textStyle: {
              fontSize: 18,
              color: '#8e8e8e',
            },
          },
        ],
        legend: {
          show: true,
          textStyle: {
            fontSize: 18,
          },
          data: [
            {
              name: '结余金额(万元)',
              itemStyle: {
                color: '#ee6666',
              },
            },
            {
              name: '拨付比(%)',
              itemStyle: {
                color: '#ffc894',
              },
            },
          ],
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            show: true,
            fontSize: 18,
            color: '#8e8e8e',
          },
        },
        yAxis: [
          {
            type: 'value',
            // min: -1000,
            // max: 1000,
            // interval: 200,
            axisLine: {
              show: true,
            },
            axisLabel: {
              show: true,
              fontSize: 18,
              color: '#8e8e8e',
            },
          },
          {
            type: 'value',
            // min: -150,
            // max: 150,
            axisLine: {
              show: true,
            },
            axisLabel: {
              show: true,
              fontSize: 18,
              color: '#8e8e8e',
            },
          },
        ],
        series: [
          {
            name: '结余金额(万元)',
            data: [],
            type: 'bar',
            barMaxWidth: 50,
            yAxisIndex: 0,
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
              formatter: function (params) {
                var colorStyle = params.value > 0 ? 'c' : 'd';
                return `{${colorStyle}|${params.value}}{${colorStyle}|万}`;
              },
              rich: {
                c: {
                  color: '#5470c6',
                  fontSize: 18,
                },
                d: {
                  color: '#ee6666',
                  fontSize: 18,
                },
              },
            },
            itemStyle: {
              color: function (params) {
                // 判断数据值是正数还是负数
                if (params.value >= 0) {
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: ' #5470c6', // 开始颜色
                      },
                      {
                        offset: 1,
                        color: '#5470c6', // 结束颜色
                      },
                    ],
                  }; // 正数的颜色为红色
                } else {
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: '#ee6666', // 开始颜色
                      },
                      {
                        offset: 1,
                        color: '#ee6666', // 结束颜色
                      },
                    ],
                  }; // 负数的颜色为绿色
                }
              },
            },
          },
          {
            name: '拨付比(%)',
            data: [],
            type: 'line',
            yAxisIndex: 1,
            label: {
              show: true,
              fontSize: 18,
              textBorderWidth: 3,
              formatter: '{c}%',
            },
            itemStyle: {
              color: '#ffc894',
            },
            lineStyle: {
              color: '#ffc894',
              width: 3, // 区块边线的粗细
            },
          },
        ],
      };
      data_list.forEach(item => {
        option.xAxis.data.push(item['月份']);
        option.series[0].data.push(item['结余金额(万元)']);
        option.series[1].data.push(item['拨付比(%)']);
      });
      option && myChart.setOption(option);
    },
    //卡片内容
    cardData(desc) {
      this.card1 = {
        text1: desc['总结'],
        text2: desc['总拨付金额(万元)'],
        text3: desc['总结余金额(万元)'],
        text4: desc['拨付比'],
      };
      this.card1.text1Html = this.card1.text1.replace(desc['总结余金额(万元)'], `<span style="color: #ff1310;">${desc['总结余金额(万元)']}</span>`);
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.page-tile-9 {
  height: 100%;
  .page-tile-9-top {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 15%;
    font-size: 2rem;
    text-align: center;
    .font-width {
      font-weight: 600;
    }
  }
  .page-tile-9-center {
    height: 75%;
  }
  .page-tile-9-bottom {
    margin: 0 20px;
    padding: 2%;
    display: flex;
    align-items: center;
    font-size: 1.7rem;
    height: 10%;
    line-height: 50px;
    background: #fff2ca;
    border-radius: 16px;
    border: 1px solid #000;
  }
  .color-tips {
    color: #ff1310;
  }
}
</style>
